<template>
	<view class="">
		<view class="Ultramans">
			<!-- <u-cell-group>
				<u-cell title="联系方式" value="18854545696"></u-cell>
			</u-cell-group> -->
			<view class="" style="margin-top: 10px;margin-left: 15px;">
				回收品类
			</view>
			<view class="capsule-radio-group">
				<view v-for="(item, index) in radioOptionsaa" :key="index" class="capsule-radio"
					:class="{ 'active': selectedValue === item.name }"
					@click="handleRadioClick(item.name,item.price,item.rate,item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<u-cell-group>
				<u-cell title="回收单价" :value="this.selectedValues + '元/斤'"></u-cell>
			</u-cell-group>
			<!-- <u-cell-group>
				<u-cell title="平台费用" value="3%"></u-cell>
			</u-cell-group> -->
			<view class="Ultramans_input">
				<view class="">
					<text style="color: red;">*</text>
					重量
				</view>
				<view class="Ultramans_input_i">
					<u--input placeholder="请输入重量" style="width: 100px;" border="surround" v-model="value"
						@change="change"></u--input>斤
				</view>
			</view>
			<u-cell-group>
				<u-cell title="金额" :value="this.numa+'元'"></u-cell>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="备注"></u-cell>
			</u-cell-group>
			<u--textarea v-model="value1" placeholder="请输入内容"
				style="margin: 10px;background-color: #f6f6f6;border-radius: 20px;"></u--textarea>
			<view class="capsule-radio-group">
				<view v-for="(item, index) in radioOptions" :key="index" class="capsule-radio"
					@click="textarea(item.dictLabel)">
					<text>{{ item.dictLabel }}</text>
				</view>
			</view>

		</view>
		<view class="Ultramansan">
			<view class="">
				总计
			</view>
			<view class="">
				<text style="color: red;">￥{{this.numa}}</text>
				<!-- <text
					style="font-size: 12px;color: #939393;margin-left: 8px;">(含平台服务费{{numc?formatDecimal(numc, 2):0}})</text> -->
			</view>
		</view>
		<view class=""></view>
		<view class="Ultramansan_a">
			<view class="Ultramansan_av" style="background-image: linear-gradient(to right, #ffa09f, #ff5f5e);"
				@click="jushou">
				拒收
			</view>
			<view class="Ultramansan_av" style="background-image: linear-gradient(to right, #2b74fc, #2672fe);"
				@click="queding">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioOptions: [{
						label: '选项一',
						value: '10'
					},
					{
						label: '选项二',
						value: '25'
					},
					{
						label: '选项三',
						value: '37'
					}
				],
				selectedValue: '', // 初始时未选中任何选项  
				value: '',
				numa: '',
				numb: '',
				numc: '',
				value1: '',
				radioOptionsaa: [],
				selectedValues: '',
				showPrice: '',
				fuwufei: '',
				nam: '',
				inde: '',
				wosid: '',
				xqid: ''
			};
		},
		onLoad(option) {
			this.wosid = option.id
			this.$ajax('get', 'recovery/code_order/' + option.id).then((res) => {
				if (res.code == 200) {
					console.log(res.data.id);
					this.xqid = res.data.id
				} else {
					this.$api.msg(res.msg)
				}
			})
			this.$ajax('get', 'recovery/recycling/category/list', {
				type: 2
			}).then((res) => {
				this.radioOptionsaa = res.data
			})
			this.$ajax('get', 'system/dict/data/type/order_remark').then((res) => {
				this.radioOptions = res.data
			})
		},
		methods: {
			queding() {
				this.$ajax('put', 'recovery/code_order', {
					category: this.inde,
					weight: this.value,
					amount: this.numb,
					serviceFee: this.numc,
					total: this.numa,
					qrCodeId: this.wosid,
					status: 1,
					id: this.xqid
				}).then((res) => {
					if (res.code == 200) {
						this.$api.msg('确定成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '../index/scanCode'
							})
						}, 600)
					} else {
						this.$api.msg('确定失败请退出重试')
					}
				})
			},
			jushou() {
				if (this.value1 != '') {
					this.$ajax('put', 'recovery/code_order', {
						category: this.inde,
						weight: this.value,
						amount: this.numb,
						serviceFee: this.numc,
						total: this.numa,
						qrCodeId: this.wosid,
						status: 3,
						id: this.xqid
					}).then((res) => {
						if (res.code == 200) {
							this.$api.msg('拒收成功')
							setTimeout(() => {
								uni.navigateTo({
									url: '../index/scanCode'
								})
							}, 600)
						} else {
							this.$api.msg('拒收失败请退出重试')
						}
					})
				} else {
					this.$api.msg('请选择拒收原因')
				}
			},
			handleRadioClick(value, price, rate, id) {
				this.inde = id
				this.selectedValue = value; // 更新选中的值 
				this.nam = price
				this.fuwufei = rate

				this.selectedValues = (parseFloat(price) * parseFloat(((rate / 100) + 1))).toFixed(2);
			},
			change(e) {
				this.numb = e * this.nam
				let a = this.numb * parseFloat(((this.fuwufei / 100))).toFixed(2);
				this.numc = parseFloat((a).toFixed(2));
				this.numa = parseFloat((e * this.selectedValues).toFixed(2));
			},
			formatDecimal(num, decimalPlaces) {
				return parseFloat(num.toFixed(decimalPlaces));
			},
			textarea(item) {
				let val = (this.value1 || '').toString() + (item || '').toString();
				this.value1 = val
			}
		}
	};
</script>

<style scoped>
	page {
		background-color: #f1f1f1;
	}

	.Ultramansan_a {
		width: 95%;
		position: absolute;
		bottom: 0%;
		justify-content: space-around;
		display: flex;
		padding: 0px 10px 0px 10px;

	}

	.Ultramansan_av {
		text-align: center;
		line-height: 50px;
		color: #fff;
		width: 140px;
		border-radius: 30px;
		height: 50px;
	}

	.Ultramans {
		background-color: #fff;
		width: 95%;
		padding-top: 10px;
		padding-bottom: 20px;
		margin: 10px auto;
		border-radius: 20px;
	}

	/deep/.u-cell__body {
		padding: 16px 15px !important;
	}

	/deep/.u-cell__title-text {
		font-size: 17px !important;
	}

	.Ultramansan {
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		width: 90%;
		margin: 0 auto;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.capsule-radio-group {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.Ultramans_input {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Ultramans_input_i {
		display: flex;
		align-items: center;
	}

	.capsule-radio {
		padding: 5px 20px;
		margin-bottom: 10px;
		border-radius: 50px;
		background-color: #f0f0f0;
		margin-right: 10px;
		text-align: center;
		cursor: pointer;
	}

	.capsule-radio.active {
		background-color: #007aff;
		color: #fff;
	}
</style>